@import '../../style/public.scss';
.immersiveLyrics_container {
    position: relative;
    // top: 0;
    // left: 0;
    // width: 100vw;
	width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    animation: fadeIn 0.3s ease-in-out; // 平滑的过渡效果
    
    // CSS变量，可以动态修改
    --album-color-primary: #8E2DE2;
    --album-color-secondary: #4A00E0;
    
    // 背景层
    .background_layer {
        position: absolute;
        inset: 0; // 等同于 top: 0; right: 0; bottom: 0; left: 0;
        z-index: 1;
        
        .color_gradient {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 30%, var(--album-color-primary) 0%, var(--album-color-secondary) 100%);
            filter: blur(100px) brightness(0.4);
        }
    }
    
    // 毛玻璃效果覆盖层 - 苹果风格
    .glass_overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        background-color: rgba(10, 10, 10, 0.4);
        backdrop-filter: blur(30px); // 现代浏览器支持
        -webkit-backdrop-filter: blur(30px); // Safari支持
    }
    
    // 内容容器
    .content_container {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 100%;
        padding: 2rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        
        // 顶部歌曲信息
        .song_info {
            margin-bottom: 3rem;
            
            .title,
            .artist{
                @include forbiddenSelect;
            }
            .title {
                font-size: 1.5rem;
                font-weight: 500;
                color: #fff;
                margin: 0 0 0.5rem 0;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
            
            .artist {
                font-size: 1.1rem;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.8);
                margin: 0;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
        }
        
        // 歌词容器
        .lyrics_container {
            width: 100%;
            max-width: 600px;
            padding: 2rem 0;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-y: auto; // 允许滚动浏览所有歌词
            max-height: 60vh; // 限制最大高度，确保在小屏幕上也能看到关闭按钮
            scrollbar-width: none; // Firefox
            -ms-overflow-style: none; // IE/Edge
            
            // 隐藏滚动条但保持功能
            &::-webkit-scrollbar {
                display: none; // Chrome/Safari
            }
            
            // 歌词条目
            .lyrics_item {
                margin: 1rem 0;
                padding: 0.5rem;
                transition: all 0.3s ease;
                max-width: 80%;
                border-radius: 8px; // 苹果风格圆角
                user-select: none; // 禁止选中歌词
                // 可点击的歌词项 (当提供onSeek回调时)
                &.clickable {
                    cursor: pointer;
                    
                    &:hover {
                        background-color: rgba(255, 255, 255, 0.1);
                    }
                    
                    &:active {
                        background-color: rgba(255, 255, 255, 0.2);
                        transform: scale(0.98);
                    }
                }
                
                // 已播放的歌词
                &.previous {
                    font-size: 1.1rem;
                    font-weight: 300;
                    color: rgba(255, 255, 255, 0.5);
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                }
                
                // 当前播放的歌词
                &.active {
                    font-size: 1.8rem;
                    font-weight: 500;
                    color: #fff;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                    transform: scale(1.05);
                }
                
                // 未播放的歌词
                &.next {
                    font-size: 1.1rem;
                    font-weight: 300;
                    // color: rgba(255, 255, 255, 0.5);
                    color: #8A8A8F;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                }
                
                // 无歌词显示
                &.empty {
                    font-size: 1.3rem;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 0.6);
                    font-style: italic;
                }
            }
        }
        
        // 关闭按钮 - 更苹果风格化
        .close_button {
            position: absolute;
            top: 2rem;
            right: 2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(10px); // 按钮也有毛玻璃效果
            -webkit-backdrop-filter: blur(10px);
            
            &:hover {
                background-color: rgba(255, 255, 255, 0.2);
                transform: scale(1.05);
            }
            
            &:active {
                transform: scale(0.95);
            }
        }
    }
}

// 淡入动画
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

// 媒体查询以适应不同屏幕大小
@media (max-width: 768px) {
    .immersiveLyrics_container {
        .content_container {
            padding: 1.5rem 1rem;
            
            .song_info {
                margin-bottom: 2rem;
                
                .title {
                    font-size: 1.3rem;
                }
                
                .artist {
                    font-size: 1rem;
                }
            }
            
            .lyrics_container {
                padding: 1rem 0;
                
                .lyrics_item {
                    &.active {
                        font-size: 1.5rem;
                    }
                    
                    &.previous,
                    &.next {
                        font-size: 1rem;
                    }
                }
            }
            
            .close_button {
                top: 1rem;
                right: 1rem;
                width: 36px;
                height: 36px;
            }
        }
    }
}

// 设备方向变化适配
@media (orientation: landscape) and (max-height: 500px) {
    .immersiveLyrics_container {
        .content_container {
            .song_info {
                margin-bottom: 1rem;
            }
            
            .lyrics_container {
                max-height: 50vh;
            }
        }
    }
}